<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>tab</title>
	</head>
	<body>
		<div id="tabContainer">
			<ul class="tabs">
				<li>标签一</li>
				<li>标签二</li>
				<li>标签三</li>
				<li>标签四</li>
			</ul>

			<div class="content">
				aaaaaaaaaa
			</div>
			<div id="box1"></div>
			<div style="height: 300px;overflow: scroll;">
				<div style="height: 1400px;background-color: #FFFF00;">
					<div style="height: 200px;"></div>
					<div id="stick">stick</div>
				</div>
			</div>
		</div>
		<style>
			#box1 {
				display: inline-block;
				position: absolute;
				bottom:30px;
				left:30px;
				width: 100px;
				height: 100px;
				margin: 10px 10px;
				padding: 10px 10px;
				border: 10px solid red;
				background-color: #0000FF;
			}
			#stick{
				position: sticky;
				top:30px;
				width: 60px;
				height: 60px;
				color: #FFFFFF;
				background-color: #000000;
			}

			ul {
				white-space: nowrap;
			}

			.tabs li {
				display: inline-block;
				width: 80px;
				height: 50px;
			}

			.active {
				background-color: #0000FF;
			}

			tabContainer {
				border: #000000;
				width: 320px;
				height: 200px;
			}
		</style>
		<script>
			Tabs.prototype.changeTab = function(j) {
				for (var i = 0; i < this.lis.length; i++) {
					this.lis[i].className = ""
				}
				this.lis[j].className = "active"
				this.tabContent.innerHTML = "我是" + j;
			}
			var name = "haha"

			function Tabs(id) { ///构造函数中this指Tabs实例
				var tabContainer = document.getElementById(id)
				var tabs = tabContainer.getElementsByClassName("tabs")[0]
				console.log("11111111======" + this.name)
				this.lis = tabs.getElementsByTagName("li")
				this.tabContent = tabContainer.getElementsByClassName("content")[0]

				for (var i = 0; i < this.lis.length; i++) {
					var self = this;
					this.lis[i].num = i;
					this.lis[i].onclick = function() {
						self.changeTab(this.num)
					}
				}
			}
			new Tabs("tabContainer");
		</script>
	</body>
</html>
